<script setup lang='ts'>
import { ref, nextTick } from 'vue'
import type { ElInput } from 'element-plus'



const props = defineProps({
  searchcheckbox: Array
})


const emit = defineEmits(["update:searchcheckbox"])





const inputValue = ref('')
// const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()
const handleClose = (tag: string) => {
  let dynamicTags = props.searchcheckbox
  dynamicTags.splice(dynamicTags.indexOf(tag), 1)
  emit("update:searchcheckbox", dynamicTags)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    let dynamicTags = props.searchcheckbox
    dynamicTags.push(inputValue.value)
    emit("update:searchcheckbox", dynamicTags)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<template>
  <el-col :span="24">
    <el-tag v-for="tag in searchcheckbox" :key="tag" class="mx-1" closable :disable-transitions="false"
      @close="handleClose(tag)">
      {{ tag }}
    </el-tag>
    <el-input v-if="inputVisible" style="width:100px;" ref="InputRef" v-model="inputValue" class="ml-1 w-[20px]"
      size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
    <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
      + 备注
    </el-button>
  </el-col>
</template>

<style lang='scss' scoped></style>
